<template>
    <el-button type="primary" style="margin-left: 16px" @click="out">
      打开
    </el-button>
  
    <el-drawer v-model="drawer" title="I am the title" :with-header="false" aria-placeholder="文章标题">
      <span>Hi there!</span>

      <div style="margin: 30px">
        <el-input v-model="title" placeholder="输入提交内容" />
      </div>
      
      <div style="margin: 30px;">
        <el-date-picker
          v-model="timer"
          type="date"
          placeholder="选择日期"
          :size="size"
        />
      </div>

      <div style="margin: 30px;">
        <el-button type="primary" style="margin-left: 16px;" @click="subForm">提交</el-button>
        <el-button type="primary" style="margin-left: 16px;" @click="subEditForm" v-show="this.chapterId">保存</el-button>
      </div>

      <div>
        
      </div>
      
    </el-drawer>


    <!-- <el-button @click="getList">添加</el-button>
  <el-table :data="List" style="width: 100%">
    <el-table-column label="日期" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.time }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="标题" width="180">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #default>
            <div>标题: {{ scope.row.chapterTitle }}</div>
              <div>日期: {{ scope.row.time }}</div>
          </template>
          <template #reference>
            <el-tag>{{ scope.row.chapterTitle}}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="Operations">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
          >Edit</el-button
        >
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >Delete</el-button
        >
      </template>
    </el-table-column>
    </el-table> -->

</template>

<script>

import axios from 'axios'

export default {
    name: "App",
    data() {
        return {
            List: [],
            timer: "",
            drawer: false,
            title: ""
        };
    },
    methods: {
        handleEdit(index, row) {
            this.drawer = true;
            this.chapterId = row.chapterId;
            this.chapterTitle = row.chapterTitle;
            this.timer = row.timer;
        },
        subEditForm() {
            axios.post("http://localhost:300/subEditForm", { chapterId: this.chapterId, chapterTitle: this.chapterTitle, time: this.timer })
                .then(res => {
                console.log(res);
            });
        },
        handleDelete(index, row) {
            let Id = row.chapterId;
            axios.post("http://localhost:3000/delete", { chapterId: Id }).then(res => {
                if (res.code === 200) {
                    this.List.splice(index, 1);
                }
            });
        },
        showDrawer() {
            this.drawer = true;
            this.chapterId = "";
            this.chapterTitle = "";
            this.timer = "";
        },
        getList() {
            axios.get("http://localhost:3000/getList").then(res => {
                this.List = res.data;
                console.log(res);
            });
        },
        out() {
            this.drawer = true;
        },
        subForm() {
            axios.post("http://localhost:3000/subForm", { chapterTile: this.title, time: this.timer })
                .then(res => {
                console.log(res);
                if (res.data.code === 200) {
                    this.drawer = false;
                    this.getList();
                }
            });
        }
    },
    mounted() {
        this.getList();
    },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
